<template>
	<view>
		<image class="banner" src="../../images/banner2.jpg"></image>
		<view class="plr20 box_b pos" style="top: -30rpx; width: 100%;">
			<view class="conBox bgfff overHidden">

				<view class="plr30 box_b">
					<view class="space100 bbe9s flex_between flex_items">
						<view class="f32 bold c0">填写报名信息</view>
						<view @click="seeRecord" class="recordBtn flex_center flex_items cf">
							<view class="f24">查看我的报名</view>
							<image class="right1" src="../../images/right1.png"></image>
						</view>
					</view>
					<view class="space100 flex_between flex_items bbe9s">
						<view class="ttBox flex_start flex_items flex_shrink">
							<view class="f30">姓名</view>
							<view class="f30 color1">*</view>
						</view>
						<input v-model="name" class="ipt" placeholder="请输入您的姓名" placeholder-class="c9" />
					</view>
					<view class="space100 flex_between flex_items bbe9s">
						<view class="ttBox flex_start flex_items flex_shrink">
							<view class="f30">手机号</view>
							<view class="f30 color1">*</view>
						</view>
						<input v-model="phone" type="number" maxlength="11" class="ipt" placeholder="请输入您的手机号"
							placeholder-class="c9" />
					</view>
					<view v-if="!isEdit" class="space100 flex_between flex_items bbe9s">
						<view class="ttBox flex_start flex_items flex_shrink">
							<view class="f30">验证码</view>
							<view class="f30 color1">*</view>
						</view>
						<view class="flex_between flex_items flex1">
							<input v-model="code" class="ipt" placeholder="请输入验证码" placeholder-class="c9"
								maxlength="5" />
							<view @click="send1Code()" v-if="isClickSendBtn" class="f28 flex_shrink pl30 box_b color2">
								获取验证码</view>
							<view v-else class="f32 c6 flex_shrink">{{ send_btn_text }}秒</view>
						</view>
					</view>
					<view class="space100 flex_between flex_items bbe9s">
						<view class="ttBox flex_start flex_items flex_shrink">
							<view class="f30">报名人数</view>
							<view class="f30 color1">*</view>
						</view>
						<input v-model="peoples" class="ipt" type="number" placeholder="请输入报名人数"
							placeholder-class="c9" />
					</view>
					<view class="space100 flex_between flex_items bbe9s">
						<view class="ttBox flex_start flex_items flex_shrink">
							<view class="f30">身份证号</view>
							<view class="f30 color1">*</view>
						</view>
						<input v-model="id_card" maxlength="18" class="ipt" placeholder="请输入你的身份证号码"
							placeholder-class="c9" />
					</view>
					<view class="space100 flex_between flex_items bbe9s">
						<view class="ttBox flex_start flex_items flex_shrink">
							<view class="f30">预约日期</view>
							<view class="f30 color1">*</view>
						</view>
						<picker mode="selector" class="flex1" :range="dateList" @change="bindDateChange">
							<view class="ipt flex_between flex_items">
								<view class="ips space100 flex_start flex_items" v-if="appdate">{{appdate }}</view>
								<view class="ips space100 flex_start flex_items c9" v-else>请选择预约时间</view>
								<image class="right2" src="../../images/right2.png"></image>
							</view>

						</picker>
					</view>
					<view class="space100 flex_between flex_items bbe9s">
						<view class="ttBox flex_start flex_items flex_shrink">
							<view class="f30">预约时间</view>
							<view class="f30 color1">*</view>
						</view>
						<picker mode="selector" class="flex1" :range="timeList" @change="bindTimeChange">
							<view class="ipt flex_between flex_items">
								<view class="ips space100 flex_start flex_items" v-if="apptime">{{apptime }}</view>
								<view class="ips space100 flex_start flex_items c9" v-else>请选择预约时间</view>
								<image class="right2" src="../../images/right2.png"></image>
							</view>
						</picker>
					</view>
					<view class="flex_start ptb25">
						<view class="ttBox flex_start flex_shrink">
							<view class="f30">备注</view>
						</view>
						<textarea v-model="remark" class="txtBox" placeholder="同行人员(大人、小朋友)的姓名、身份证号码请在此处填写(必填)"
							placeholder-class="color1"></textarea>
					</view>
					<view v-if="isEdit" class="flex_start ptb25">
						<view class="ttBox flex_start flex_shrink">
							<view class="f30">管理员备注</view>
						</view>
						<textarea v-model="remark1" class="txtBox" placeholder="请输入备注"
							placeholder-class="c9"></textarea>
					</view>

				</view>
				<view class="f30 txt_center ts ptb30 bold">温馨提示：活动开始半小时后不再入场</view>
				<view class="flex_center flex_items ptb40 plr30 box_b">
					<view @click="submit" class="btn1 flex_center flex_items f32 bold cf">提交信息</view>
				</view>
			</view>

			<view class="mt30 bgfff ptb40">
				<view class="flex_center flex_items f30 bold">
					<view>联系电话:</view>
					<view class="color3">15775185532</view>
					<view>(王女士)</view>
				</view>
				<image class="img" src="../../images/wx.png"></image>
				<view class="f28 c6 txt_center">长按二维码添加工作人员</view>
				<view class="f26 cc txt_center mt30">资阳大众网提供技术支持</view>
			</view>
		</view>
		<loginUser ref="login1User"></loginUser>
	</view>
</template>

<script>
	let common = getApp().globalData.commonFun;
	let util = getApp().globalData.utilFun;
	import loginUser from '@/components/loginUser/loginUser.vue';
	export default {
		components: {
			loginUser
		},
		data() {
			return {
				imghttp: getApp().globalData.imghttp,
				isEdit: false,
				dateList: [
					"2025-01-29",
					"2025-01-30",
					"2025-01-31",
					"2025-02-01",
					"2025-02-02",
					"2025-02-03",
					"2025-02-04",
					"2025-02-05",
					"2025-02-06",
					"2025-02-07"
				],
				timeList: [
					'上午 10:30 - 11:50',
					'下午 14:30 - 15:50',
					'下午 16:10 - 17:30'
				],
				name: '',
				phone: "",
				code: '',
				id: 0,
				id_card: "",
				appdate: "",
				apptime: "",
				aptime: "",
				remark: '',
				remark1: "",
				date: "",
				peoples: 1,
				isClickSendBtn: true,
				time: 60,
				interval: null,
				send_btn_text: '',
				isClickConfirmBtn: true,
			}
		},
		async onLoad(opstion) {
			this.initData(opstion);
			let that = this;
			getApp().globalData.updateIndexData = function(res) {
				that.initData(res);
			}
		},
		methods: {
			async initData(opstion) {
				if (common.hasKey(opstion, 'phone')) {
					this.phone = opstion.phone;
					this.isEdit = true;
					uni.setNavigationBarTitle({
						title: "编辑报名"
					})
					common.showLoading("加载中...");
					this.getData();
				} else {
					this.isEdit = false;
					uni.setNavigationBarTitle({
						title: "临空美院美术馆报名预约"
					})
				}

				this.date = util.getFormatDate1(new Date());
				//this.appdate = util.getFormatDate1(new Date());
				this.aptime = util.getFormatDate2(new Date());;
				//this.apptime = util.getFormatDate2(new Date());
			},
			seeRecord() {
				let phone = common.getStorage('phone');
				if (phone && phone != undefined && typeof phone !== 'object' && !Array.isArray(phone)) {
					uni.navigateTo({
						url: "/pages/enrollRecord/enrollRecord"
					})
				} else {
					this.$refs.login1User.show();
				}
			},
			bindTimeChange(e) {
				console.log(e)
				this.apptime = this.timeList[e.detail.value];
			},
			bindDateChange(e) {
				console.log(e)
				this.appdate = this.dateList[e.detail.value];
			},
			async submit() {
				let val = {
					name: this.name,
					phone: this.phone,
					id_card: this.id_card,
					peoples: this.peoples,
					appdate: this.appdate,
					apptime: this.apptime,
					remark: this.remark
				}

				if (this.name == "") {
					common.showTimeToast('请输入姓名');
					return;
				}

				if (this.phone == "") {
					common.showTimeToast('请输入手机号');
					return;
				}

				if (!this.isEdit) {
					if (this.code == "") {
						common.showTimeToast('请输入验证码');
						return;
					}
					val['code'] = this.code;
				}

				if (this.id_card == "") {
					common.showTimeToast('请输入身份证号');
					return;
				}
				if (this.peoples == "") {
					common.showTimeToast('请输入报名人数');
					return;
				}

				if (this.appdate == "") {
					common.showTimeToast('请选择预约日期');
					return;
				}
				if (this.apptime == "") {
					common.showTimeToast('请选择预约时间');
					return;
				}
				let url = 'arts/save';
				if (this.isEdit) {
					url = 'arts/edit';
					val['id'] = this.id;
					val['remark1'] = this.remark1;
				}
				common.showLoading("...");
				let res = await util.httpRequest(url, val, "POST");
				common.hideLoading();
				this.isClickSendBtn = true;
				this.isClickConfirmBtn = true;
				if (res.result == "fail") {
					common.showTimeToast(res.msg);
					return;
				}
				if (this.isEdit) {
					if (getApp().globalData.updateEnrollListData) {
						console.log()
						getApp().globalData.updateEnrollListData(val)
					}
					common.showTimeToast("编辑成功");
				} else {
					common.showTimeToast("提交成功");
				}

				common.setStorage("phone", this.phone);
				let that = this;
				setTimeout((rs) => {
					if (that.isEdit) {
						uni.navigateBack();
					} else {
						uni.redirectTo({
							url: "/pages/enrollRecord/enrollRecord"
						})
					}
				}, 2000)
			},
			/**
			 * 发送验证码
			 */
			async send1Code() {
				let that = this;
				if (!this.isClickSendBtn) return;
				if (this.phone === '') {
					common.showTimeToast('请输入手机号', 2000);
					return;
				}
				let val = {
					phone: this.phone
				};

				common.showLoading("发送中...")
				let url = 'arts/sendCode';
				let res = await util.httpRequest(url, val, "POST");
				common.hideLoading();
				if (res.result === 'success') {
					common.showTimeToast('发送成功');
					this.settime();
				} else {
					common.showTimeToast(res.msg);
					this.isClickSendBtn = true;
				}
			},
			//倒计时
			settime() {
				let that = this;
				this.interval = setTimeout(() => {
					let t = that.time;
					let txt = that.send_btn_text;
					if (t === 0) {
						txt = '发送验证码';
						t = 60;
						that.isClickSendBtn = true;
						clearTimeout(that.interval);
					} else {
						txt = t;
						t -= 1;
						that.settime();
						that.isClickSendBtn = false;
					}
					that.time = t;
					that.send_btn_text = txt;
				}, 1000);
			},
			async getData() {
				let val = {
					phone: this.phone
				}
				let url = 'arts/detail';
				let res = await util.httpRequest(url, val);
				common.hideLoading();
				if (res.result == "fail") {
					common.showTimeToast(res.msg);
					return;
				}
				this.id = res.results.id;
				this.name = res.results.name;
				this.peoples = res.results.peoples;
				this.id_card = res.results.id_card;
				this.appdate = res.results.appdate;
				this.apptime = res.results.apptime;
				this.remark = res.results.remark;
				this.remark1 = res.results.remark1;
			}
		},
	}
</script>

<style>
	page {
		background: #f8f8f8;
	}
</style>
<style scoped>
	Page {
		background: #f8f8f8;
	}

	.banner {
		width: 750rpx;
		height: 500rpx;
	}

	.ts {
		background: #fffcf2;
		color: #c79357;
	}

	.recordBtn {
		width: 200rpx;
		height: 50rpx;
		border-radius: 40rpx;
		background: #15a183;
	}

	.right1 {
		width: 8rpx;
		height: 14rpx;
		margin-left: 10rpx;
	}

	.ttBox {
		width: 190rpx;
	}

	.color1 {
		color: #ff0050;
	}

	.ipt {
		width: 100%;
		height: 100rpx;
	}

	.color2 {
		color: #15a183;
	}

	.color3 {
		color: #3b63fe;
	}

	.img {
		width: 240rpx;
		height: 240rpx;
		display: block;
		margin: 30rpx auto;
	}

	.ips {
		height: 100%;
		width: 100%;
	}

	.txtBox {
		width: 100%;
		height: 200rpx;
	}

	.right2 {
		width: 10rpx;
		height: 18rpx;
		margin-left: 10rpx;
	}

	.btn1 {
		width: 100%;
		height: 90rpx;
		border-radius: 45rpx;
		background: #15a183;
	}
</style>